<template>
  <div>
    <van-nav-bar
      title="一对一辅导"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu>
      <van-dropdown-item title="选择上课时间">
        <div class="content">
          <div class="cont-title">日期</div>
          <div class="cont-item">
            <ul class="cont-dates">
              <li>周一</li>
              <li>周二</li>
              <li>周三</li>
              <li>周四</li>
              <li>周五</li>
              <li>周六</li>
              <li>周日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
              <li
                v-for="(day, index) in days"
                :key="index"
                @click="pick(day, index)"
              >
                <!--本月-->
                <span
                  v-if="day.getMonth() + 1 != currentMonth"
                  class="other-month"
                  >{{ day.getDate() }}</span
                >
                <span v-else>
                  <!--今天-->
                  <span :class="navindex == index ? 'active' : ''">{{
                    day.getDate()
                  }}</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="times">
          <p>时段</p>
          <div>
            <div @click="changetime(1)">
              <p>开始时间</p>
              <van-icon name="clock-o" />
            </div>
            <span>--</span>
            <div @click="changetime(2)">
              <p>结束时间</p>
              <van-icon name="clock-o" />
            </div>
          </div>

          <!-- 开始时间 -->
          <van-popup v-model="showPopup1" position="bottom">
            <van-datetime-picker
              v-model="currentTimeStart"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
              @confirm="qdStart"
            />
          </van-popup>
          <!-- 结束时间 -->
          <van-popup v-model="showPopup2" position="bottom">
            <van-datetime-picker
              v-model="currentTimeEnd"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
              @confirm="qdEnd"
            />
          </van-popup>
        </div>
        <div class="bot">
          <button>重置</button>
          <button>确定</button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="选择老师条件">
        <!-- 老师条件 -->
        <div class="tiaojian">
          <ul>
            <p>老师类型</p>
            <li
              v-for="(item, index) in teacherlist.otoTeacherLevel"
              :key="index"
            >
              {{ item.level_name }}
            </li>
          </ul>
          <ul v-for="(item, index) in teacherlist.attrList" :key="index">
            <p>{{ item.attr_name }}</p>
            <li v-for="(t, i) in item.child" :key="i">{{ t.attr_val_name }}</li>
          </ul>
        </div>
        <div class="bot">
          <button>重置</button>
          <button>确定</button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <img :src="item.avatar" alt />
          <div>
            <p class="name">{{ item.real_name }}</p>
            <p>
              <span class="sex">{{ item.sex == 0 ? "男" : "女" }}</span>
              <span class="age">{{ item.teach_age }}年教龄</span>
            </p>
          </div>
          <p class="yuyue" @click="push(item.teacher_id)">预约</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { sjkTeacher, sjkCourseOptions } from "../../utils/http";
export default {
  data() {
    return {
      teacherlist: [], //老师条件数据
      showPopup1: false, //开始时间弹框
      currentTimeStart: "",
      currentTimeEnd: "",
      showPopup2: false, //开始时间弹框
      navindex: 0,
      list: [],
      currentYear: 1970, // 年份
      currentMonth: 1, // 月份
      currentDay: 1, // 日期
      currentWeek: 1, // 星期
      days: [],
    };
  },
  created() {
    this.getlist();
    this.getotoCourseOptions();
    this.initData(null);
    this.days.forEach((item, index) => {
      // console.log(item,index)
      if (item.getDate() == new Date().getDate()) {
        this.navindex = index;
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({ path: "/search" });
    },
    push(id) {
      console.log(id);
      this.$router.push(`/coachDetail/${id}`);
    },
    formatDate(year, month, day) {
      const y = year;
      let m = month;
      if (m < 10) m = `0${m}`;
      let d = day;
      if (d < 10) d = `0${d}`;
      return `${y}-${m}-${d}`;
    },
    // 当前选择日期
    pick(date, index) {
      this.xzriqi = this.formatDate(
        date.getFullYear(),
        date.getMonth() + 1,
        date.getDate()
      );
      this.navindex = index;
      //   console.log(this.newTime, index, this.navindex);
    },
    initData(cur) {
      let date = "";
      if (cur) {
        date = new Date(cur);
      } else {
        date = new Date();
      }
      this.currentDay = date.getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 1...6,0  // 星期几
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
      const str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );
      this.days.length = 0;
      //  这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
      /* eslint-disabled */
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str);
        d.setDate(d.getDate() - i);
        // console.log(y:" + d.getDate())
        this.days.push(d);
      }
      for (let i = 1; i <= 14 - this.currentWeek; i += 1) {
        const d = new Date(str);
        d.setDate(d.getDate() + i);
        this.days.push(d);
      }
    },
    // 控制选择时间弹出
    changetime(index) {
      console.log(index);
      if (index == 1) {
        this.showPopup1 = true;
      } else if (index == 2) {
        this.showPopup2 = true;
      }
    },
    // 点击选择时间确定
    qdStart(value) {
      this.currentTimeStart = value;
      this.showPopup1 = false;
    },
    qdEnd(value) {
      this.currentTimeEnd = value;
      this.showPopup2 = false;
    },
    getlist() {
      sjkTeacher({
        page: 1,
        limit: 10,
        attr_val_id: 1,
      }).then((res) => {
        console.log(res);
        this.list = res;
      });
    },
    // 获取老师条件数据
    getotoCourseOptions() {
      sjkCourseOptions().then((res) => {
        console.log(res);
        this.teacherlist = res;
      });
    },
  },
};
</script>

<style scoped>
.van-dropdown-item /deep/.van-dropdown-item__content{
   max-height: 100%;
 }
.content {
  width: 95%;
  margin: 10px auto;
}
.cont-title {
  height: 30px;
  font-size: 16px;
  padding: 0 10px;
  box-sizing: border-box;
}
.cont-item {
  width: 100%;
  margin-top: 8px;
}
.cont-dates {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cont-dates li {
  font-size: 16px;
  color: gray;
}
.days {
  display: flex;
  flex-wrap: wrap;
}
.days li {
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
  width: 50px;
  line-height: 50px;
}
.days li span {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.days li .active {
  display: inline-block;
  color: #eb6b1c;
  border-radius: 50%;
  background-color: #ebeefe;
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.days li .other-month {
  color: #eb6b1c;
}
.tiaojian ul {
  display: flex;
  flex-wrap: wrap;
}
.tiaojian ul p {
  width: 100%;
  padding: 10px 10px;
}

.tiaojian ul li {
  width: 19%;
  margin: 0 3%;
  background: #f5f5f5;
  text-align: center;
  height: 33px;
  line-height: 33px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.teachers {
  width: 100%;
  background: #f0f2f5;
}
.teacher_s {
  width: 95%;
  height: 13vh;
  background: #fff;
  border-radius: 0.15rem;
  margin: 0.2rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0.5rem 0.3rem;
  z-index: 111;
}
.tearch_img {
  width: 40%;
  display: flex;
  justify-content: space-between;
}
.tearch_img .img_img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #e4e3e3;
  margin-top: -0.1rem;
}
.tearch_img .img_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list {
  padding: 0 2.66667vw;
  background: #f0f2f5;
}
.list ul {
  padding-top: 10px;
}
.list ul li {
  display: flex;
  padding: 0 15px;
  height: 80px;
  align-items: center;
  background: white;
  margin-top: 10px;
  border-radius: 5px;
}
.list ul li div {
  flex: 1;
}
.list ul li div .name {
  font-size: 18px;
  color: black;
}
.list ul li div p {
  color: gray;
  font-size: 14px;
  margin: 5px 0;
}
.list ul li div p span {
  display: inline-block;
  margin-right: 10px;
}
img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}
.yuyue {
  width: 60px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #eb6e17;
  background: #ebeefe;
  border-radius: 10px;
  font-size: 12px;
  z-index: 1;
}
.times {
  background: white;
  margin: 10px;
  padding-bottom: 20px;
}
.times p {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
}
.times div {
  display: flex;
  width: 100%;
}
.times div div {
  display: flex;
  width: 147px;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #bfbfbf;
  border-radius: 5px;
}
.van-icon {
  margin-right: 5px;
}
.times div p {
  width: 115px;
  text-indent: 10px;
}
.times div p span {
  display: inline-block;
  width: 30px;
  text-align: center;
  height: 36px;
  line-height: 36px;
}
.bot {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
.bot button {
  width: 45%;
  height: 40px;
  background-color: orangered;
  color: white;
  border: 0;
  border-radius: 10px;
  font-size: 20px;
}
</style>
